<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义属性</title>
</head>

<body>
    <div class="tool"></div>
    <script>
        //自定义属性
        var arr = [
            {
                id: 1,
                tname: "pencil"
            },
            {
                id: 2,
                tname: "pencilbox"
            },
            {
                id: 3,
                tname: "pen"
            }
        ]
        var ttag = '<ul>'
        arr.forEach(function (item, index) {
            ttag += '<li data-abc ="hello" data-fid="' + item.id + '">' + item.tanme + '</li>'
        })
        ttag += '</ul>'

        var div = document.getElementById("#tool");
        div.innerHTML = ttag;
        var ul = document.getElementsByTagName("ul")[0]
        ul.click = function (e) {
            console.log(e, target.dataset.fid)
        }
    </script>
</body>

</html>